<template>
  <div class="loginBox">
    <div class="header">
      找回密码
    </div>
    <div class="loginForm">
      <group>
        <x-input ref="phone"
                 title="手机号码"
                 :max="11"
                 keyboard="number"
                 v-model.trim="obj.phone.number"
                 name="phone"
                 placeholder="请输入11位电话号码"
                 :is-type="checkPhone">
        </x-input>
      </group>

      <group>
        <x-input title="验证码"
                 ref="code"
                 name="code"
                 :min="4"
                 :max="4"
                 placeholder="请输入验证码"
                 @on-change="inputCode"
                 v-model.trim="obj.code.value"
                 class="weui-vcode">
          <x-button v-if="time==60" slot="right" type="primary" @click.native="getCode"
                    :class="obj.phone.valid?'disable-btn':''" :disabled="obj.phone.valid||time!=60" mini>获取验证码
          </x-button>
          <x-button v-else slot="right" type="primary" mini>短信验证{{time}}S</x-button>
        </x-input>
      </group>

      <div class="login" @click="next" :class="obj.phone.valid||obj.code.valid?'disable-btn':''">下一步</div>

      <!--<div class="login" >下一步</div>-->
    </div>
  </div>
</template>
<!--<script src="./forgetPassword.js"></script>-->

<script>
  import md5 from 'js-md5';
  export default {
    name: "forgetPassword",
    components: {},
    data() {
      return {
        obj: {
          code: {
            value: '',
            valid: true
          },
          phone: {
            valid: true,
            number: ''
          }
        },
        time: 60,//倒计时
      }
    },
    methods: {
      next(){
        if(this.obj.phone.valid==true||this.obj.code.valid==true){
          return;
        }
        this.$ajax.post("system/sms/use", {phone: this.obj.phone.number,code:this.obj.code.value,type:2}, (res) => {
          if (res.code == 200) {
            if(this.$fromApp(this)){
              this.$callJava({url:this.$webUrl+"set/password?from=app&type=0&flowId="+res.data+"&phone="+this.obj.phone.number})
            }else{
              this.$router.push({ path:'/set/password',query:{type:0,flowId:res.data,phone:this.obj.phone.number}})
            }

          } else {
            this.$vux.toast.text(res.msg, 'middle');
          }
        });
      },
      inputCode(val) {
        if (val&&val.length>3&&val.length<7) {
          this.obj.code.valid = false;
        } else {
          this.obj.code.valid = true;
        }
      },

      checkPhone(value) {
        let reg = /^[1][0-9]{10}$/;
        if (reg.test(value)) {
          this.obj.phone.valid = false;
          return {valid: true}
        } else {
          this.obj.phone.valid = true;
          return {valid: false, msg: "手机号格式错误"}
        }
      },

      //倒计时
      timer() {
        if (this.timerInit) {
          clearInterval(this.timerInit);
        }
        this.time = 60;
        this.timerInit = setInterval(() => {
          this.time--;
          if (this.time < 1) {
            this.showType = true;
            this.time = 60;
            clearInterval(this.timerInit);
            return false;
          }
        }, 1000)
      },

      getCode() {
        this.obj.phone.valid = true
        setTimeout(() => {
          this.obj.phone.valid = false
        }, 2000)
        console.log("q111")
        if (this.obj.phone) {
          if (this.$refs.phone.valid == true) {
            this.$ajax.post("system/sms/password", {phone: this.obj.phone.number}, (res) => {
              console.log(res)
              if (res.code == 200) {
                this.timer()
              } else {
                this.$vux.toast.text(res.msg, 'middle');
              }
            });
          } else {
            this.$vux.toast.text("手机号格式有误", 'middle');
          }
        } else {
          this.$vux.toast.text("手机号不能为空", 'middle');
        }
      }
    },
    mounted: function () {

    }
  }

</script>


<style lang="less" scoped>
  /*@import "./login.less";*/
  .disable-btn{
    opacity: 0.5;
  }

  .loginBox {
    background-color: #fff;
    position: absolute;
    width: 100%;
    height: 100%;

    .header {
      margin-left: .4rem;
      margin-top: .7rem;
      font-size: .44rem;
      font-family: PingFang-SC-Bold;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      line-height: .56rem;
    }

    .loginForm {
      margin-top: 1.38rem;
      padding-right: .4rem;
      padding-left: .4rem;

      /deep/ .weui-cells {
        margin-top: 0;
        font-size: 0.32rem;
        line-height: 0px;
        display: flex;
        align-items: center;
        .weui-cell {
          padding: 0.3rem 0rem;
        }

        .weui-input {
          color: #333;
          font-size: 0.3rem;
        }
      }

      /deep/ .weui-cells:before {
        display: none;
      }

      /deep/ .weui-cells:after {
        border-bottom: 1px solid rgba(235, 235, 235, 1);
      }

      /deep/ .weui-btn {
        /*border: 0px;*/
        color: rgba(253, 179, 118, 1);
        padding: 0px;
        font-size: .26rem;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        border: none;
        background-color: transparent;
        outline: none;
      }

      /deep/ .weui-btn:after {
        border: none;
      }


      /deep/ .weui-label {
        width: 1.35rem !important;
        display: inline-block;
        text-align: justify;
        text-align-last: justify;
        margin-right: .65rem;
        font-size: .32rem;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }

      /deep/ .weui-label:after {
        width:100%;
        display: inline-block;
        content: '';
      }

      /deep/ input::-webkit-input-placeholder {
        color: #ddd;
        font-size: 0.3rem;
      }

      /deep/ input:-moz-placeholder {
        color: #ddd;
        font-size: 0.3rem;
      }

      /deep/ input:-ms-input-placeholder {
        color: #ddd;
        font-size: 0.3rem;
      }

      /deep/ .weui-btn {
        border: 0px;
        color: rgba(253, 179, 118, 1);
        padding: 0px;
        font-size: .26rem;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
      }


      .login {
        margin-top: 1.2rem;
        background: rgba(82, 125, 217, 1);
        box-shadow: 0rem .18rem .35rem .0rem rgba(82, 125, 217, 0.15);
        border-radius: .46rem;
        padding: .3rem;
        text-align: center;
        font-size: .34rem;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }

    }
  }

</style>

